<template>
  <GlobalBG title="工具">
    <view class="container-tools">
      <!-- 搜索框 -->
      <uni-easyinput
        class="searchInput"
        :inputBorder="false"
        v-model="keyword"
        placeholder="搜索工具名称"
        @confirm="handleSearch"
      >
        <template #right>
          <image
            class="searchImg"
            @click="handleSearch"
            src="/src/static/images/xgjd/search.png"
          ></image>
        </template>
      </uni-easyinput>

      <!-- 常用工具 -->
      <view class="normal-box" v-if="filteredRegularTools.length > 0">
        <view class="title-name">常用工具</view>
        <view class="tool-normal-content">
          <view
            class="tool-item mb28"
            v-for="item in filteredRegularTools"
            :key="item.id"
            @click="handleToolClick(item)"
          >
            <image class="iconImg" :src="item.icon" mode="aspectFit"></image>
            <view class="name">{{ item.toolName }}</view>
          </view>
        </view>
      </view>

      <!-- 全部工具 -->
      <view class="normal-box" v-if="filteredMarketTools.length > 0">
        <view class="title-name">全部工具</view>
        <view class="tool-all-content">
          <view
            class="all-box"
            v-for="group in filteredMarketTools"
            :key="group.groupSeq"
          >
            <view class="title-name">{{ group.toolGroup }}</view>
            <view class="nobg">
              <view
                class="tool-item mb28"
                v-for="item in group.tools"
                :key="item.id"
                @click="handleToolClick(item)"
              >
                <image
                  class="iconImg"
                  :src="item.icon"
                  mode="aspectFit"
                ></image>
                <view class="name">{{ item.toolName }}</view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 无数据提示 -->
      <view class="no-data" v-if="showNoData">
        <image
          src="/static/images/common/no-data.png"
          class="no-data-img"
        ></image>
        <text class="no-data-text">未找到相关工具</text>
      </view>

      <!-- 加载状态 -->
      <view class="loading" v-if="loading">
        <uni-load-more status="loading"></uni-load-more>
      </view>
    </view>
  </GlobalBG>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import api from '@/api/modules/event';
import { onLoad } from '@dcloudio/uni-app';

// 数据状态
const keyword = ref(''); // 定义搜索关键词的响应式变量
// 定义原始工具数据的响应式变量
const originalData = ref({
  marketTools: [],
  regularTools: [],
});
const loading = ref(false); // 定义加载状态的响应式变量

// 计算过滤后的常用工具列表
const filteredRegularTools = computed(() => {
  if (!keyword.value) return originalData.value.regularTools; // 如果没有搜索关键词，返回原始的常用工具列表
  const searchText = keyword.value.toLowerCase(); // 将搜索关键词转换为小写
  // 根据工具名称是否包含搜索关键词来决定是否保留
  return originalData.value.regularTools.filter(
    (
      item // 过滤常用工具列表
    ) => item.toolName.toLowerCase().includes(searchText)
  );
});
// 计算过滤后的市场工具列表
const filteredMarketTools = computed(() => {
  if (!keyword.value) return originalData.value.marketTools;
  const searchText = keyword.value.toLowerCase();
  return originalData.value.marketTools
    .map((group) => ({
      // 遍历市场工具列表中的每个组
      ...group, // 复制组的所有属性
      tools: group.tools.filter(
        (
          tool // 过滤组中的工具
        ) => tool.toolName.toLowerCase().includes(searchText)
      ),
    }))
    .filter((group) => group.tools.length > 0); // 过滤掉工具数量为0的组
});

// 计算是否显示“无数据”提示
const showNoData = computed(() => {
  return (
    !loading.value && // 加载状态为非加载时
    filteredRegularTools.value.length === 0 && // 过滤后的常用工具列表为空时
    filteredMarketTools.value.length === 0 // 过滤后的市场工具列表为空时
  );
});

// 搜索处理函数
const handleSearch = () => {
  uni.hideKeyboard(); // 隐藏软键盘
};
// 工具点击处理函数
const handleToolClick = (tool) => {
  console.log('点击工具:', tool);
  uni.navigateTo({
    url: '/pages/video/video',
  });
  // if (tool.path) {
  //   uni.navigateTo({
  //     url: tool.path,
  //   });
  // } else {
  //   uni.showToast({
  //     title: `打开${tool.toolName}`,
  //     icon: 'none',
  //   });
  // }
};

const fetchTools = async () => {
  // 获取工具列表的异步函数
  try {
    loading.value = true; // 设置加载状态为正在加载
    const res = await api.gettools();
    if (res.data) {
      originalData.value = res.data;
    }
  } catch (error) {
    console.error('获取工具列表失败', error);
    uni.showToast({
      title: '获取工具列表失败',
      icon: 'none',
    });
  } finally {
    loading.value = false; // 无论成功或失败，都设置加载状态为非加载
  }
};

// 页面加载时调用的生命周期函数
onLoad(() => {
  fetchTools();
});
</script>

<style lang="scss" scoped>
.container-tools {
  padding: 32rpx 26rpx;
  min-height: 100vh;
  box-sizing: border-box;
}

.searchInput ::v-deep .uni-easyinput__content {
  height: 87rpx !important;
  line-height: 87rpx !important;
  border-radius: 15rpx;
  background-color: #f5f5f5;
}

.searchInput ::v-deep .uni-easyinput__icon-right {
  height: 87rpx;
  display: flex;
  align-items: center;
  border-radius: 15rpx;
}

.searchImg {
  width: 54rpx;
  height: 54rpx;
  margin-right: 21rpx;
}

.normal-box {
  margin-top: 32rpx;
}

.title-name {
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 32rpx;
  color: #333;
  line-height: 42rpx;
  margin-bottom: 20rpx;
}

.tool-normal-content {
  display: flex;
  flex-wrap: wrap;
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
}

.tool-all-content {
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
}

.all-box {
  margin-bottom: 32rpx;

  &:last-child {
    margin-bottom: 0;
  }
}

.nobg {
  display: flex;
  flex-wrap: wrap;
}

.tool-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 25%;
  margin-bottom: 28rpx;
  box-sizing: border-box;
  padding: 0 10rpx;

  &.mb28 {
    margin-bottom: 28rpx;
  }
}

.iconImg {
  width: 96rpx;
  height: 96rpx;
  margin-bottom: 16rpx;
}

.name {
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 24rpx;
  color: #666;
  line-height: 36rpx;
  text-align: center;
  word-break: break-all;
}

.no-data {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;

  &-img {
    width: 240rpx;
    height: 240rpx;
    margin-bottom: 32rpx;
  }

  &-text {
    font-size: 28rpx;
    color: #999;
  }
}

.loading {
  padding: 40rpx 0;
  display: flex;
  justify-content: center;
}
</style>
